<template>
  <div>
    <el-row type="flex" justify="center" style="margin-top: 20px">
      <el-col :span="22">
        <el-steps :active="stepIndex" process-status="wait" finish-status="success" align-center :simple="true">
          <el-step title="基本设置" />
          <el-step title="表单设置" />
          <el-step title="流程设置" />
        </el-steps>
      </el-col>
    </el-row>

    <div>
      <el-row type="flex" justify="center" style="margin-top: 20px">
        <el-col :span="8" class="center-button">
          <el-button v-if="stepIndex > 1" icon="el-icon-check" type="primary" round @click="pre"> 上一步 </el-button>
        </el-col>
        <el-col :span="8" class="center-button">
          <el-button icon="el-icon-check" type="primary" round @click="nextStep">
            {{ stepIndex === 3 ? '提交保存' : '下一步' }}
          </el-button>
        </el-col>
        <el-col :span="8" class="center-button">
          <el-button type="primary" round @click="back"> 返回 </el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 第一步基本设置页面 -->
    <el-row v-if="stepIndex === 1" style="margin-top: 20px" type="flex" justify="center">
      <ApprovalSet ref="approvalSet" />
    </el-row>

    <!-- 第二步表单设置 -->
    <el-row v-if="stepIndex === 2" type="flex" justify="center">
      <FormDesign ref="formDesigner" />
    </el-row>

    <!-- 第三步流程设置 -->
    <el-row v-if="stepIndex === 3" type="flex" justify="center" style="margin-top: 20px">
      <ProcessDesign />
    </el-row>
    <div />
  </div>
</template>

<script>
  import ProcessDesign from './components/ProcessDesign.vue'
  import FormDesign from './components/FormDesign.vue'
  import ApprovalSet from './components/ApprovalSet.vue'
  import { save } from '@/api/oaProcessTemplate'
  export default {
    components: {
      FormDesign,
      ProcessDesign,
      ApprovalSet
    },
    data() {
      return {
        stepIndex: 1
      }
    },
    methods: {
      async nextStep() {
        if (this.stepIndex === 1) {
          // 获取子组件实例，再根据子组件实例获取子组件的 el-from的实例
          this.$refs.approvalSet.$refs.approvalSet.validate(isOk => {
            if (isOk) {
              // 保存审批数据到vuex中
              this.$store.dispatch('approval/setApprovalSet', this.$refs.approvalSet.approvalSet)
              this.stepIndex = 2
              this.$nextTick(() => {
                this.$refs.formDesigner.setOptionsJson()
              })
            } else {
              return false
            }
          })
        } else if (this.stepIndex === 2) {
          // 触发子组件的方法，获取表单设计数据
          this.$refs.formDesigner.getOptionsJson()
          this.stepIndex = 3
        } else {
          // 整体保存流程设计数据
          const formData = this.$store.getters.oaProcessTemplate
          if (formData.changeProcessDefinitionPath === '') {
            this.$message.warning('请先上传流程图')
            return
          }
          await save(formData)
          // 清除vuex中的数据 oaProcessTemplate对象中的字段清空
          this.$store.dispatch('approval/resetOaProcessTemplate')
          this.$message.success('保存成功')
          this.$router.push('/approvalsettings/template')
        }
      },
      pre() {
        this.stepIndex--
        if (this.stepIndex === 2) {
          // 触发子组件的方法，用于回显数据
          this.$nextTick(() => {
            this.$refs.formDesigner.setOptionsJson()
          })
        }
      },
      back() {
        if (this.stepIndex === 1) {
          this.$router.push('/approvalsettings/template')
        } else if (this.stepIndex === 2) {
          this.stepIndex = 1
        } else if (this.stepIndex === 3) {
          this.stepIndex = 2
          this.$nextTick(() => {
            this.$refs.formDesigner.setOptionsJson()
          })
        }
      }
    }
  }
</script>

<style>
  .center-button {
    text-align: center;
  }
</style>
